<template>
    <div>
        <ul class="example-2">
            <li class="icon-content">
                <a href="https://cn.vuejs.org/"  aria-label="Spotify" data-social="spotify">
                    <div class="filled"></div>
                    <SvgIcon name="vue" />
                </a>
                <div class="tooltip">VueJS</div>
            </li>
            <li class="icon-content">
                <a href="https://cn.vitejs.dev/" target="_Blank" aria-label="Pinterest" data-social="pinterest">
                    <div class="filled"></div>
                    <SvgIcon name="vite" />
                </a>
                <div class="tooltip">Vite</div>
            </li>
            <li class="icon-content">
                <a href="https://www.typescriptlang.org/" target="_Blank" aria-label="Dribbble" data-social="dribbble">
                    <div class="filled"></div>
                    <SvgIcon name="ts" />
                </a>
                <div class="tooltip">TypeScript</div>
            </li>
            <li class="icon-content">
                <a href="https://nodejs.org/en" target="_Blank" aria-label="Telegram" data-social="telegram">
                    <div class="filled"></div>
                    <!-- <svg version="1.1" viewBox="0 0 100 100">
                        <path
                            d="M95,9.9c-1.3-1.1-3.4-1.2-7-0.1c0,0,0,0,0,0c-2.5,0.8-24.7,9.2-44.3,17.3c-17.6,7.3-31.9,13.7-33.6,14.5  c-1.9,0.6-6,2.4-6.2,5.2c-0.1,1.8,1.4,3.4,4.3,4.7c3.1,1.6,16.8,6.2,19.7,7.1c1,3.4,6.9,23.3,7.2,24.5c0.4,1.8,1.6,2.8,2.2,3.2  c0.1,0.1,0.3,0.3,0.5,0.4c0.3,0.2,0.7,0.3,1.2,0.3c0.7,0,1.5-0.3,2.2-0.8c3.7-3,10.1-9.7,11.9-11.6c7.9,6.2,16.5,13.1,17.3,13.9  c0,0,0.1,0.1,0.1,0.1c1.9,1.6,3.9,2.5,5.7,2.5c0.6,0,1.2-0.1,1.8-0.3c2.1-0.7,3.6-2.7,4.1-5.4c0-0.1,0.1-0.5,0.3-1.2  c3.4-14.8,6.1-27.8,8.3-38.7c2.1-10.7,3.8-21.2,4.8-26.8c0.2-1.4,0.4-2.5,0.5-3.2C96.3,13.5,96.5,11.2,95,9.9z M30,58.3l47.7-31.6  c0.1-0.1,0.3-0.2,0.4-0.3c0,0,0,0,0,0c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2-0.1c-0.1,0.1-0.2,0.4-0.4,0.6L66,38.1  c-8.4,7.7-19.4,17.8-26.7,24.4c0,0,0,0,0,0.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0.1,0,0.1-0.1,0.2c0,0,0,0.1,0,0.1  c0,0,0,0,0,0.1c-0.5,5.6-1.4,15.2-1.8,19.5c0,0,0,0,0-0.1C36.8,81.4,31.2,62.3,30,58.3z"
                            fill="currentColor"></path>
                    </svg> -->
                    <SvgIcon name="node" />
                </a>
                <div class="tooltip">NodeJS</div>
            </li>
        </ul>

    </div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/Icons/index.vue';
</script>

<style scoped>
ul {
    list-style: none;
    padding-left: 0px;
}

.example-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.example-2 .icon-content {
    margin: 0 10px;
    position: relative;
}

.example-2 .icon-content .tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    transition: all 0.3s ease;
}

.example-2 .icon-content:hover .tooltip {
    opacity: 1;
    visibility: visible;
    top: -50px;
}

.example-2 .icon-content a {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #4d4d4d;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

.example-2 .icon-content a:hover {
    box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}

.example-2 .icon-content a svg {
    position: relative;
    z-index: 1;
    width: 15px;
    height: 15px;
}

.example-2 .icon-content a:hover {
    color: white;
}

.example-2 .icon-content a .filled {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #000;
    transition: all 0.3s ease-in-out;
}

.example-2 .icon-content a:hover .filled {
    height: 100%;
}

.example-2 .icon-content a[data-social="spotify"] .filled,
.example-2 .icon-content a[data-social="spotify"]~.tooltip {
    background-color: #42b883;
}

.example-2 .icon-content a[data-social="pinterest"] .filled,
.example-2 .icon-content a[data-social="pinterest"]~.tooltip {
    background-color: #ab4afe;
}

.example-2 .icon-content a[data-social="dribbble"] .filled,
.example-2 .icon-content a[data-social="dribbble"]~.tooltip {
    background-color: #3178c6;
}

.example-2 .icon-content a[data-social="telegram"] .filled,
.example-2 .icon-content a[data-social="telegram"]~.tooltip {
    background-color: #417e38;
}
</style>